<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="/natal/js/rem.js"></script>
    <link rel="stylesheet" href="/natal/css/style.css?v=35">
    <link rel="stylesheet" href="/natal/css/dating.css?v=40">
    <title>本命预测</title>
    <script> //友盟打点
    var SITE_ID = "{$site_id}";
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id='+SITE_ID+'&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
    //声明_czc对象:
    var _czc = _czc || [];
    //绑定siteid，请用您的siteid替换下方"XXXXXXXX"部分

    _czc.push(["_trackEvent", SITE_ID]);//页面事件
    _czc.push(["_setCustomVar", SITE_ID]);//访客类型
    _czc.push(["_trackPageview", SITE_ID]);//页面PV
    _czc.push(["_setAutoPageview", SITE_ID]);//是否自动发送页面PV的统计请求
    </script>
</head>
<body>
<script>
    _czc.push(["_trackPageview","/婚姻报告详情页"]);
</script>
<div class="money-report">
    <!--下载条-->
    {if $is_show_download_bar===1}<a href="https://at.umtrack.com/onelink/TPzKDm" style="margin: 0;padding:0;"><img src="{$oss}/mini/astrolabe/h5/download_bar.png"
                                                                                                    style="width: 100%;height: 0.88rem"></a>{/if}
    <!--导航栏-->
    <div id="navigate" class="navigate" style="width: 100%;height: 0.88rem;display: flex;flex-direction:row;
  justify-content:space-between;
  align-items:center;z-index:1000;">
        <a href="{$callback_url}"><img src="{$oss}/mini/astrolabe/h5/back.png" style=" width: 0.14rem;height: 0.26rem;margin-left: 0.4rem;"/></a>
        <div style=" height: 0.26rem;font-size: 0.26rem;display: flex;align-items:center; font-weight:600;color:rgba(20,27,36,1);">报告详情</div>
        <a href="{$astro_home_page}"><img src="{$oss}/mini/astrolabe/h5/home.png" style=" width: 0.26rem;height: 0.26rem;margin-right: 0.4rem;"/></a>
    </div>
    <div class="nav" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back" onclick="commonJsToNative('local', 'back');">
                <div class="img"></div>
            </div>
            <div class="title-name">{$data.name}</div>
        </div>
    </div>
    <div class="header-box header-box{$height}"></div>
    <div class="middle-box">
        <div class="top-box" style="margin-top:-0.16rem">
            <div class="bg-box">
                <img class="top-box-img" src="/natal/images/top-img-dating.png" alt="">
                <div class="text-box">
                    <p class="pre-text">{$text.text1}</p>
                </div>
            </div>
        </div>
        <div class="curv-box">
            <div class="curv-title scrollTitle" data-index="m-1">
                <img src="/natal/images/curv-title-dating.png?v=1" alt="">
            </div>
            <div class="curv-area">
                <div class="curv-area-content">
                    <canvas id="curv">canvas</canvas>
                </div>
            </div>
            <div class="curv-tips">
                <div class="good"><i></i>婚姻机缘好的时期</div>
                <div class="bad"><i></i>婚姻机缘低的时期</div>
            </div>
        </div>
        <div class="content-box">
            <!--婚姻概述-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-2">
                    <img src="/natal/images/title-hytz-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text2}</p>
                </div>
                <!--婚姻特征-->
                <div class="title-item3 scrollTitle" data-index="m-2-1">
                    <span class="title-name type1">婚姻特征</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140100]??'无词条'}</p>
                </div>
                <!--婚姻是否顺遂-->
                <div class="title-item3 scrollTitle" data-index="m-2-2">
                    <span class="title-name type2">婚姻是否顺遂</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140101]??'无词条'}</p>
                </div>
                <!--早婚or晚婚-->
                <div class="title-item3 scrollTitle" data-index="m-2-3">
                    <span class="title-name type1">早婚or晚婚</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140102]??'无词条'}</p>
                </div>
            </div>

            <!--适宜结婚的年龄-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-3">
                    <img src="/natal/images/title-smshhjh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text5}</p>
                </div>
                <div class="curv-area" style="padding: 0.4rem 0.4rem 0.02rem;overflow: hidden;">
                    <div class="curv-area-content" style="position: relative;transform: scale(1, 1);
zoom: 0.25;overflow: hidden;height: 800px;">
                        <canvas id="curv-datting">canvas</canvas>
                    </div>
                </div>
            </div>

            <!--伴侣条件特征-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-4">
                    <img src="/natal/images/title-jhdxtjrh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text4}</p>
                </div>
                <!--性格特征-->
                <div class="title-item3 scrollTitle" data-index="m-4-1">
                    <span class="title-name type1">性格特征</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140300]??'无词条'}</p>
                </div>
                <!--经济能力-->
                <div class="title-item3 scrollTitle" data-index="m-4-2">
                    <span class="title-name type2">经济能力</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140301]??'无词条'}</p>
                </div>
                <!--事业特质-->
                <div class="title-item3 scrollTitle" data-index="m-4-3">
                    <span class="title-name type1">事业特质</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140302]??'无词条'}</p>
                </div>
                <!--家庭背景-->
                <div class="title-item3 scrollTitle" data-index="m-4-4">
                    <span class="title-name type2">家庭背景</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140303]??'无词条'}</p>
                </div>
                <!--相识途径-->
                <div class="title-item3 scrollTitle" data-index="m-4-5">
                    <span class="title-name type1">相识途径</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140304]??'无词条'}</p>
                </div>
            </div>

            <!--婚后感情生活-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-5">
                    <img src="/natal/images/title-hhgqrh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text6}</p>
                </div>
                <!--婚后相处模式-->
                <div class="title-item3 scrollTitle" data-index="m-5-1">
                    <span class="title-name type1">婚后相处模式</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140500]??'无词条'}</p>
                </div>
                <!--婚后经济状态-->
                <div class="title-item3 scrollTitle" data-index="m-5-2">
                    <span class="title-name type2">婚后经济状态</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140501]??'无词条'}</p>
                </div>
                <!--婚后幸福指数-->
                <div class="title-item3 scrollTitle" data-index="m-5-3">
                    <span class="title-name type1">婚后幸福指数</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140502]??'无词条'}</p>
                </div>
                <!--婚后矛盾及建议-->
                <div class="title-item3 scrollTitle" data-index="m-5-4">
                    <span class="title-name type2">婚后矛盾及建议</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140503]??'无词条'}</p>
                </div>
            </div>

            <!--姻缘的阻碍-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-6">
                    <img src="/natal/images/title-smzzandhy-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text3}</p>
                </div>
                <!--不适合的对象-->
                <div class="title-item3 scrollTitle" data-index="m-6-1">
                    <span class="title-name type1">不适合的对象</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][140200]??'无词条'}</p>
                </div>
                <!--错过姻缘的原因-->
                <div class="title-item3 scrollTitle" data-index="m-6-2">
                    <span class="title-name type2">错过姻缘的原因</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][140201]??'无词条'}</p>
                </div>
            </div>
        </div>
        <div class="bottom-box">
            <div class="bg-box">
                <div class="text-box">
                    <p class="pre-text">{$text.end_desc}</p>
                </div>
            </div>
            <img class="bt-star" src="/natal/images/star_name.png" alt="">
            <img class="bt-img" src="/natal/images/star_bottom.png" alt="">
        </div>
    </div>
    <!--抽屉-->
    <div class="menu-box">
        <div class="menu-button">
            <img src="/natal/images/menu-button_dating.png" alt="目录"/>
        </div>
        <div class="menu-shadow" id="menu-shadow"></div>
        <div class="menu-list">
            <div class="menu-title">
                <span class="head">目录</span>
                <i class="collapse"></i>
            </div>
            <dl>
                <dt data-index="m-1">1/婚姻机缘较好的年份</dt>
            </dl>
            <dl>
                <dt data-index="m-2">2/婚姻概述</dt>
                <dd>
                    <ul>
                        <li data-index="m-2-1"><i class="circle"></i>婚姻特征</li>
                        <li data-index="m-2-2"><i class="circle"></i>婚姻是否顺遂</li>
                        <li data-index="m-2-3"><i class="circle"></i>早婚or晚婚</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-3">3/适宜结婚的年龄</dt>
            </dl>
            <dl>
                <dt data-index="m-4">4/伴侣条件特征</dt>
                <dd>
                    <ul>
                        <li data-index="m-4-1"><i class="circle"></i>性格特征</li>
                        <li data-index="m-4-2"><i class="circle"></i>经济能力</li>
                        <li data-index="m-4-3"><i class="circle"></i>事业特质</li>
                        <li data-index="m-4-4"><i class="circle"></i>家庭背景</li>
                        <li data-index="m-4-5"><i class="circle"></i>相识途径</li>
                    </ul>
                </dd>
            </dl>
            <dl style="margin-bottom: 1rem">
                <dt data-index="m-5">5/婚后感情生活</dt>
                <dd>
                    <ul>
                        <li data-index="m-5-1"><i class="circle"></i>婚后相处模式</li>
                        <li data-index="m-5-2"><i class="circle"></i>婚后经济状态</li>
                        <li data-index="m-5-3"><i class="circle"></i>婚后幸福指数</li>
                        <li data-index="m-5-4"><i class="circle"></i>婚后矛盾及建议</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-6">6/姻缘的阻碍</dt>
                <dd>
                    <ul>
                        <li data-index="m-6-1"><i class="circle"></i>不适合的对象</li>
                        <li data-index="m-6-2"><i class="circle"></i>错过姻缘的原因</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
</div>
<script>
    window.navHeight = {$height};
    window.levels = {$levels};
    window.appType = '{$appType}';
    window.version = '{$version}';
    window.isShow = 1; // 1抽屉隐藏 2抽屉显示

    window.onscroll=function(){
        let topScroll = document.documentElement.scrollTop || document.body.scrollTop;//滚动的距离,距离顶部的距离
        console.log(topScroll)
        var bignav = document.getElementById("navigate");//获取到导航栏id
        if(topScroll <= 88){
            //当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
            bignav.style.position = 'static';
        }else{
            //当滚动距离大于88px时执行下面的东西
            bignav.style.position = 'fixed';
            bignav.style.top = '0%';
            bignav.style.right = '0%';
            bignav.style.background = '#FFFFFF';
        }
    }
</script>
<script type="text/javascript" src="/natal/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript" src="/natal/js/common.js?v=36"></script>
<script type="text/javascript" src="/natal/js/canvas.js?v=34"></script>
<script type="text/javascript">
    window.onload = function () {
        window.drawCanvas.colors = ['#809BFF', '#83FED1'];
        window.drawCanvas.startYear = 20;
        window.drawCanvas.Years = 61;
        window.drawCanvas.initload('curv', window.levels, 0);

        var dattingYears = {$data.text[4]['levels']};
        // 最容易结婚的年纪 3-14区间
        var dattingCanvas = document.getElementById('curv-datting'), max = 14, min = 3;
        var dattingCanvasWidth = parseFloat($(dattingCanvas).parent().css('width')), ds = 4, dattingCanvasHeight = 200 * ds;
        dattingCanvas.setAttribute('width', dattingCanvasWidth + 'px');
        dattingCanvas.setAttribute('height', dattingCanvasHeight + 'px');
        var dattingCtx = dattingCanvas.getContext("2d");
        dattingCtx.clearRect(0, 0, dattingCanvasWidth, dattingCanvasHeight)
        dattingCtx.lineJoin = 'round';
        dattingCtx.lineCap = 'round';

        var posX = dattingCanvasWidth / 10;
        var startX = posX / 2;
        var curvDatas = [];
        // 准备绘制最高的10个年份
        for (var j = 0; j < 10; j++) {
            var x = startX + j * posX;
            var y = (max - dattingYears[j]['s']) / (max - min) * 155 * ds + 35 * ds;

            // 绘制年龄
            dattingCtx.beginPath();
            dattingCtx.font = 20 * ds + 'px serif';
            dattingCtx.fillStyle = '#00E9A0';
            dattingCtx.fillText(dattingYears[j]['y'], x - 20 * ds / 2, 20 * ds);
            dattingCtx.closePath();

            // 绘制虚线
            dattingCtx.beginPath();
            dattingCtx.setLineDash([5 * ds]);
            dattingCtx.moveTo(x, 30 * ds);
            dattingCtx.lineTo(x, dattingCanvasHeight);
            dattingCtx.lineWidth = ds;
            dattingCtx.strokeStyle = '#DDDDDD';
            dattingCtx.stroke();
            dattingCtx.closePath();

            curvDatas.push({x: x, y: y})
        }

        // 绘制曲线
        var endLength = curvDatas.length - 1, b = curvDatas[0];
        dattingCtx.beginPath();
        dattingCtx.strokeStyle = '#6FD6F7';
        dattingCtx.globalAlpha = 1;
        dattingCtx.lineWidth = 2 * ds;
        dattingCtx.setLineDash([]);
        dattingCtx.moveTo(b.x, b.y);
        for (var k = 0; k < endLength; k++) {
            var e = curvDatas[k + 1],
                c = (curvDatas[k].x + curvDatas[k + 1].x) / 2,
                c1 = {x: c, y: b.y},
                c2 = {x: c, y: e.y};
            dattingCtx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, e.x, e.y);
            b = e;
        }
        dattingCtx.stroke();
        dattingCtx.closePath();

        for (var l = 0; l < curvDatas.length; l++) {
            var x = curvDatas[l].x, y = curvDatas[l].y;
            // 绘制圆环⭕️
            dattingCtx.beginPath();
            dattingCtx.moveTo(x, y);
            dattingCtx.globalAlpha = 1;
            dattingCtx.arc(x, y, 7 * ds, 0, 2 * Math.PI, true);
            dattingCtx.closePath();
            dattingCtx.fillStyle = '#00E9A0';
            dattingCtx.fill();

            dattingCtx.beginPath();
            dattingCtx.moveTo(x, y);
            dattingCtx.globalAlpha = 1;
            dattingCtx.arc(x, y, 4 * ds, 0, 2 * Math.PI, true);
            dattingCtx.closePath();
            dattingCtx.fillStyle = '#fff';
            dattingCtx.fill();
        }
    }
</script>
{include file="../apps/web/view/public/sensors.html" /}
</body>
</html>
